<template>
    <div>
        <wd-header :title="toptitle">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>

        <div class="videoBox">
            <video :src="videourl" :poster="poster" autoplay></video>
        </div>
         
        <div class="detail animated fadeIn">
            <div class="top">
                <h4>{{toptitle}}</h4>
                <p>
                    <!-- <span ref="praisetotal">{{this.$route.params.likes}}</span> -->
                    <!-- <span>次点赞</span> -->
                    <!-- <i class="iconfont icon-xin" ref="isPraise" @click.once="praise"></i> -->
                </p>
            </div>
            <div class="center">
                <span>{{date}}日发布</span>
                <span>{{views > 10000 ? (views/10000).toFixed(1)+'万' : views}}次播放</span>
            </div>
            <div class="bottom">
                {{detail}}
            </div>
        </div>

    </div>
</template>
<script>
export default {
    name: 'singlevideo',
    data() {
        return {
            auth:JSON.parse(localStorage.user),
            timesurl:'http://www.jydsapp.com/jydsApi/api/h5/common/addPlayNum',
            praiseurl:'http://www.jydsapp.com/jydsApi/api/h5/common/memoryLikes'
	    }
    },
    computed:{
        toptitle(){
            return this.$store.state.single_video_need_data.title
        },
        videourl(){
            return this.$store.state.single_video_need_data.videourl
        },
        poster(){
            return this.$store.state.single_video_need_data.imgurl
        },
        date(){
            return this.$store.state.single_video_need_data.time.slice(0,10).replace('-','年').replace('-','月')
        },
        views(){
            return this.$store.state.single_video_need_data.views
        },
        detail(){
            return this.$store.state.single_video_need_data.content
        },
        memoryid(){
            return this.$store.state.single_video_need_data.memory_id
        }
    },
    created(){
        this.addTimes()
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        addTimes(){
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","memoryId":"${this.memoryid}"}`
            this.fetch({
                method: 'post',
                url: this.timesurl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                
            }).catch((err) => {
                
            });
        }
       /* praise(){
            let count = parseInt(this.$refs.praisetotal.innerHTML)
            count++
            this.$refs.praisetotal.innerHTML = count
            this.$refs.isPraise.className = 'iconfont icon-dianzandian'
            setTimeout(()=>{
            	this.$refs.isPraise.className = 'bounceOut'
            },200)
        }*/
    }
}
</script>
<style lang="scss" scoped>
.videoBox{

    video{
        width: 100%;
    }
}
.detail{
    padding: 0 0.37037rem;
    .top{
        display: flex;
        justify-content:space-between;
        align-items:center;
        height: 0.777778rem;

        h4{
            font-size: 0.444444rem;
        }

        p{  
            span{
                color: red;
            }
            span:nth-child(2){
                margin-right: 5px;
            }

            i{
                color: red;
                font-size: 14px;
            }
        }
    }

    .center{
        // margin-bottom: 0.092593rem;
        margin: .1rem 0;
        color: #555;
        span:nth-child(1){
            margin-right: 0.37037rem;
        }
    }

    .bottom{
        color: #555;
    }
}
</style>
